<template>
    <div>
        <Upload
                multiple
                type="drag"
                :before-upload="handleBeforeUpload"
                :action="this.uploadUrl"
                name="avatar">
            <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>点击或将文件拖拽到这里上传</p>
            </div>
        </Upload>
        <Tree :data="data6" class="tree" @on-select-change="onSelectChangeTree"></Tree>
        <Button type="error" @click="onDeletes" id="btn">删除多个文件</Button>
        <Input v-model="filter.cateId" class="search">
        <Button slot="append" icon="ios-search" @click="onSearch"></Button>
        </Input>
        <Input v-model="filter.originalname" class="search1" id="search">
        <Button slot="append" icon="ios-search" @click="onSearch"></Button>
        </Input>
        <Table border :columns="columns" :data="filter.list"             @on-selection-change="onSelectionChange" class="table"></Table>
        <Page :total="filter.total" size="small" class="page"
                show-total show-elevator show-sizer
                @on-change="onChange"
                @on-page-size-change="onPageSizeChange">
        </Page>
        <Modal
                v-model="modal"
                title="数据操作">
            <Form ref="formValidate" :model="formValidate" :label-width="80">
                <FormItem label="文件名" prop="filename">
                    <Input v-model="formValidate.filename" placeholder="文件名称"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary"
                            @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost"
                            @click="handleReset('formValidate')"
                            style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import Base from '../../common/Base';
    export default {
        mixins : [Base],
        data () {
            return {
                data6: [],
                module : 'upload',
                uploadUrl:'',
                formValidate : {
                    filename: '',
                    cateId:'',
                },
                columns : [
                    {
                        type : 'selection',
                        width : 60,
                        align : 'center'
                    },
                    {
                        title : '_id',
                        key : '_id',
                    },
                    {
                        title : '文件名',
                        width: 150,
                        key : 'originalname'
                    },
                    {
                        title : '图片',
                        width:'125',
                        key:'filename',
                        render:(h,params)=>{
                            return h('img',{
                                attrs:{
                                    src:'http://localhost:3000/'+params.row.filename,
                                    style: 'width: 100px;height: 100px;'
                                }
                            })
                        }
                    },
                    {
                        title : '类型',
                        width:140,
                        key : 'mimetype'
                    },
                    {
                        title : '操作',
                        key : 'action',
                        width : 200,
                        align : 'center',
                        render : (h, params) =>{
                            return h('div', [
                                h('Button', {
                                    props : {
                                        type : 'primary',
                                        size : 'small'
                                    },
                                    style : {
                                        marginRight : '5px'
                                    },
                                    on : {
                                        click : () =>{
                                            this.show(params.row)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props : {
                                        type : 'error',
                                        size : 'small'
                                    },
                                    on : {
                                        click : () =>{
                                            this.remove(params.row._id)
                                        }
                                    }
                                }, '删除'),
                            ]);
                        }
                    }
                ],
            }
        },
        methods:{
            onSelectChangeTree(selection){
                if(selection&&selection.length>0){
                    this.cateId=selection[0]._id;
                    this.$http.get('http://localhost:3000/cate/data/'+this.cateId)
                        .then(res=>{
                            var dataChildren=res.data._id;
                            console.log(dataChildren);
                            this.$http.post(`http://localhost:3000/upload/classifyLists`,{cateId:dataChildren})
                                .then(res=>{
                                    this.filter.list=res.data;
                                    this.filter.total=res.data.length;
                                    this.filter.page=Math.ceil(res.data.length/10);
                                })
                        })
                }else{
                    this.cateId='';
                    this.$Message.info('你取消了选择');
                    this.getData();
                }
            },
            handleBeforeUpload(){
                if(this.cateId&&this.cateId.length>0){
                    this.uploadUrl=`http://localhost:3000/upload/upload/${this.cateId}`;
                    this.getData();
                    return true;
                }else{
                    this.$Message.info('未选择类别');
                    return false;
                }
            },
            getTree(){
                this.$http.get('http://localhost:3000/cate/list/2')
                    .then(res=>{
                        this.data6 = res.data;
                    })
            },
        },
        created(){
            this.getTree();
        }
    }
</script>

<style>
    .tree{
        width:150px;
        float:left;
    }
    .search{
        width:800px;
        display:none;
    }
    .search1{
        width:400px;
    }
    .table{
        width:800px;
        margin-left:150px;
    }
    .page{
        margin-left:150px;
    }
</style>

